Angular Date Pipe allows us to format dates in Angular using the requested format, time zone & local information. It comes with built-in pre-defined formats. We can also customize the date format by creating custom format strings. We can set the time zone, country locale, etc. This tutorial shows how to use Date Pipe using examples.
The Date uses the pipe operator i.e |. Specify the date_expression, which you want to format in the left side of the |. On the right side specify date followed by the arguments. It accepts three arguments format, timezone & locale
{{ date_expression | date [ : format [ : timezone [ : locale ] ] ] }}
The following is the example of a date pipe it its simplest form.
<h3>Using Date Pipe </h3>
<p>Unformatted date : {{toDate }} </p> //Without pipe
<p>Formatted date : {{toDate | date}} </p> //With Date Pipe
The Date Expression can be anything that evaluates to date. For example it can be a Date object, a number (milliseconds since UTC epoch), or an ISO string
//Component
toDate: Date = new Date();
numDate=1590319189931;
strDate="Sun May 24 2020 19:16:23";
<h3>Date Expression </h3>
<p>Date Object : {{toDate | date}} </p> //May 24, 2020
<p>Number Date : {{numDate | date}} </p> //May 24, 2020
<p>ISO Date : {{strDate | date}} </p> //May 24, 2020
The Date pipe accepts three arguments format, timezone & locale
| Parameter | Data Type | Particulars |
|---|---|---|
| format | string | There are two types of format.
Default: mediumDate. |
| timezone | string | Use
Default: End-users local system timezone |
| locale | string | A locale code for the locale format rules to use.
Default: The value of LOCALE_ID ( which is en-US) How to Change LOCALE_ID |
There are two types formats options available
The following are the Pre defined formats that you can use. We have also mentioned the corresponding custom formats next to it.
| Format | Equivalent Custom Format | Example | Result |
|---|---|---|---|
| short | 'M/d/yy, h:mm a' | {{toDate | date:'short'}} | 5/24/20, 3:40 PM |
| medium | 'MMM d, y, h:mm:ss a' | {{toDate | date:'medium'}} | May 24, 2020, 3:42:17 PM |
| long | 'MMMM d, y, h:mm:ss a z' | {{toDate | date:'long'}} | May 24, 2020 at 3:42:17 PM GMT+5 |
| full | 'EEEE, MMMM d, y, h:mm:ss a zzzz' | {{toDate | date:'full'}} | Sunday, May 24, 2020 at 3:42:17 PM GMT+05:30 |
| shortDate | 'M/d/yy' | {{toDate | date:'shortDate'}} | 5/24/20 |
| mediumDate | 'MMM d, y' | {{toDate | date:'mediumDate'}} | May 24, 2020 |
| longDate | 'MMMM d, y' | {{toDate | date:'longDate'}} | May 24, 2020 |
| fullDate | 'EEEE, MMMM d, y' | {{toDate | date:'fullDate'}} | Sunday, May 24, 2020 |
| shortTime | 'h:mm a' | {{toDate | date:'shortTime'}} | 3:42 PM |
| mediumTime | 'h:mm:ss a' | {{toDate | date:'mediumTime'}} | 3:42:17 PM |
| longTime | 'h:mm:ss a z' | {{toDate | date:'longTime'}} | 3:42:17 PM GMT+5 |
| fullTime | 'h:mm:ss a zzzz' | {{toDate | date:'fullTime'}} | 3:42:17 PM GMT+05:30 |
The following is the complete list of custom formats that are available
| Field type | Format | Description | Example Value |
|---|---|---|---|
| Era | G, GG & | Abbreviated | AD |
| GGG | |||
| GGGG | Wide | Anno Domini | |
| GGGGG | Narrow | A | |
| Year | y | Numeric: minimum digits | 2, 20, 201, 2017, 20173 |
| yy | umeric: 2 digits + zero padded | 02, 20, 01, 17, 73 | |
| yyy | Numeric: 3 digits + zero padded | 002, 020, 201, 2017, 20173 | |
| yyyy | Numeric: 4 digits or more + zero padded | 0002, 0020, 0201, 2017, 20173 | |
| Month | M | Numeric: 1 digit | 9, 12 |
| MM | Numeric: 2 digits + zero padded | 09, 12 | |
| MMM | Abbreviated | Sep | |
| MMMM | Wide | September | |
| MMMMM | Narrow | S | |
| Month | L | Numeric: 1 digit | 9, 12 |
| standalone | LL | Numeric: 2 digits + zero padded | 09, 12 |
| LLL | Abbreviated | Sep | |
| LLLL | Wide | September | |
| LLLLL | Narrow | S | |
| Week of year | w | Numeric: minimum digits | 1... 53 |
| ww | Numeric: 2 digits + zero padded | 01... 53 | |
| Week of month | W | Numeric: 1 digit | 1... 5 |
| Day of month | d | Numeric: minimum digits | 1 |
| dd | Numeric: 2 digits + zero padded | 01 | |
| Week day | E, EE & EEE | Abbreviated | Tue |
| EEEE | Wide | Tuesday | |
| EEEEE | Narrow | T | |
| EEEEEE | Short | Tu | |
| Period | a, aa & aaa | Abbreviated | am/pm or AM/PM |
| aaaa | Wide (fallback to a when missing) | ante meridiem/post meridiem | |
| aaaaa | Narrow | a/p | |
| Period* | B, BB & BBB | Abbreviated | mid |
| BBBB | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | |
| BBBBB | Narrow | md. | |
| Period standalone* | b, bb & bbb | Abbreviated | mid. |
| bbbb | Wide | am, pm, midnight, noon, morning, afternoon, evening, night | |
| bbbbb | Narrow | md | |
| Hour 1-12 | h | Numeric: minimum digits | 1, 12 |
| hh | Numeric: 2 digits + zero padded | 01, 12 | |
| Hour 0-23 | H | Numeric: minimum digits | 0, 23 |
| HH | Numeric: 2 digits + zero padded | 00, 23 | |
| Minute | m | Numeric: minimum digits | 8, 59 |
| mm | Numeric: 2 digits + zero padded | 08, 59 | |
| Second | s | Numeric: minimum digits | 0... 59 |
| ss | Numeric: 2 digits + zero padded | 00... 59 | |
| Fractional seconds | S | Numeric: 1 digit | 0... 9 |
| SS | Numeric: 2 digits + zero padded | 00... 99 | |
| SSS | Numeric: 3 digits + zero padded (= milliseconds) | 000... 999 | |
| Zone | z, zz & zzz | Short specific non location format (fallback to O) | GMT-8 |
| zzzz | Long specific non location format (fallback to OOOO) | GMT-08:00 | |
| Z, ZZ & ZZZ | ISO8601 basic format | -0800 | |
| ZZZZ | Long localized GMT format | GMT-8:00 | |
| ZZZZZ | ISO8601 extended format + Z indicator for offset 0 (= XXXXX) | -08:00 | |
| O, OO & OOO | Short localized GMT format | GMT-8 | |
| OOOO | Long localized GMT format | GMT-08:00 |
{{toDate | date:'dd/MM/y'}} //24/05/2020
{{toDate | date:'dd/MM/yy HH:mm'}} //May 24, 2020, 7:17:26 PM
The following examples, shows how to use time zones
Date in India (IST Time Zone) : {{toDate | date:'short':'IST'}} //Date in India (IST Time Zone) : 5/24/20, 7:32 PM
Date in USA (CDT Time Zone) : {{toDate | date:'short':'CDT'}} //Date in USA (CDT Time Zone) : 5/24/20, 9:02 AM
Date in India (+0530) : {{toDate | date:'short':'+0530'}} //Date in India (+0530) : 5/24/20, 7:32 PM
Date in USA (-0700) : {{toDate | date:'short':'-0500'}} //Date in USA (-0700) : 5/24/20, 9:02 AM
The Country Locale is the third argument.
British date time is {{toDate | date:'dd/MM/yy HH:mm':'GMT':'en-GB'}} //British date time is 24/05/20 14:26
